<template>
  <div>
    <div class="rating-select border-1px">
      <span
        class="select-type ALL"
        @click="select(2)"
        :class="{ on: selectType === 2 }"
      >
        {{ desc.all }}<span class="smallFont">{{ ratings.length }}</span>
      </span>
      <span
        class="select-type positive"
        @click="select(0)"
        :class="{ on: selectType === 0 }"
      >
        {{ desc.positive }}
        <span class="smallFont">{{ positives.length }}</span>
      </span>
      <span
        class="select-type negative"
        @click="select(1)"
        :class="{ on: selectType === 1 }"
      >
        {{ desc.negative }}<span class="smallFont">{{ negatives.length }}</span>
      </span>
    </div>
    <div class="toggleContent" @click="toggleContent">
      <span class="icon-check_circle" :class="isOnlyContent"></span>
      <span class="text">只看有内容的评价</span>
    </div>
  </div>
</template>

<script>
const POSITIVE = 0
const NEGATIVE = 1
const ALL = 2

const EVENT_TOGGLE = 'toggle'
const EVENT_SELECT = 'select'

export default {
  name: 'ratings-select',
  props: {
    selectType: {
      type: Number,
      default: ALL
    },
    onlyContent: {
      type: Boolean,
      default: true
    },
    desc: {
      type: Object,
      default() {
        return {
          all: '全部',
          positive: '满意',
          negative: '不满意'
        }
      }
    },
    ratings: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    isOnlyContent() {
      if (this.onlyContent) {
        return 'on'
      }
    },
    positives() {
      return this.ratings.filter(rating => rating.rateType === POSITIVE)
    },
    negatives() {
      return this.ratings.filter(rating => rating.rateType === NEGATIVE)
    }
  },
  methods: {
    toggleContent() {
      this.$emit(EVENT_TOGGLE)
    },
    select(type) {
      this.$emit(EVENT_SELECT, type)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixin.stylus';
@import '~styles/base.stylus';

.rating-select {
  padding: 18px 0;
  font-size: 0;
  border-1px(rgba(7, 17, 27, 0.1));

  .select-type {
    display: inline-block;
    margin-right: 8px;
    padding: 8px 12px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 16px;
    color: rgb(77, 85, 93);

    .smallFont {
      margin-left: 4px;
      font-size: 8px;
      vertical-align: bottom;
    }

    &.ALL, &.positive {
      background: #ccecf8;

      &.on {
        color: #fff;
        background: #00a0dc;
      }
    }

    &.negative {
      background: #e9ebec;

      &.on {
        color: #fff;
        background: #93999f;
      }
    }
  }
}

.toggleContent {
  padding: 12px 0;
  color: rgb(147, 153, 159);
  line-height: 24px;

  .icon-check_circle {
    margin-right: 4px;
    font-size: 24px;
    vertical-align: middle;

    &.on {
      color: #00c850;
    }
  }

  .text {
    display: inline-block;
    font-size: 12px;
  }
}
</style>
